<script setup>
import Carousel from "../common/swiper.vue";
import aboutThree from "../assets/about-three-img.png"
import { ref, onMounted, inject } from "vue";
import Modal from "../common/Modal.vue"
import { getRequest } from "@/api";
import ScrollReveal from '@/scrollreveal';

const imgDefultUrl = 'https://www.philhar.cn/upload/swiper/'
const mapRef = ref();
const bannsers = ref({});
const aboutItms = ref({});
const companys = ref({});
const recommends = ref({});
const cases = ref({});

const isModalVisible = ref(false);
const opsition = ref('');
const modelPhoneNumber = ref('');
const position = ref('');



const scrollReveal = inject('scrollReveal');

onMounted(() => {
  const map = new BMapGL.Map(mapRef.value);
  const point = new BMapGL.Point(87.617874, 43.792566);
  const marker = new BMapGL.Marker(point);
  map.addOverlay(marker);
  map.centerAndZoom(point, 20)
  aboutRequest()
  window.scrollTo(0, 0);


  scrollReveal.reveal('.reveal-element', {
    duration: 1000,
    scale: 1,
    distance: '0rem',
    reset: true,
    mobile: false,
    useDelay: 'always',
    origin: 'top',
    delay: 200
  });

})

const aboutRequest = () => {
  getRequest('about_index').then(res => {
    console.log('about_index', res);
    bannsers.value = res.banner;
    aboutItms.value = res;
    companys.value = res.company;
    recommends.value = res.recommend;
    cases.value = res.case
  })
}
const options = [
  {
    label: "天山区",
    value: '天山区',
  },
  {
    label: '沙依巴克区',
    value: '沙依巴克区'
  },
  {
    label: '新市区',
    value: '新市区'
  },
  {
    label: "水磨沟区",
    value: '水磨沟区',
  },
  {
    label: '头屯河区',
    value: '头屯河区'
  },
  {
    label: '达坂城区',
    value: '达坂城区'
  },
  {
    label: '米东区',
    value: '米东区'
  },
  {
    label: '乌鲁木齐县',
    value: '乌鲁木齐县',
  },
];

const handlePositionChange = (e) => {
  const selectedValue = e.target.value;
  position.value = selectedValue
}

const modeSubClick = () => {
  const phoneNumber = document.getElementById('modelPhoneNumber').value.trim(); // 使用一个新的变量名，避免冲突
  const phoneRegex = /^1[3456789]\d{9}$/;
  if (phoneNumber && phoneRegex.test(phoneNumber)) {
    postRequest('/quote_message', {
      quote_area: position.value,
      quote_tel: phoneNumber // 直接使用新的变量名 phoneNumber
    }).then(res => {
      if (res.code === 200) {
        alert('成功');
        isModalVisible.value = false;
      }
    });
  } else {
    alert('请输入正确的手机号');
  }
};
</script>
<template>
  <div class="about-us">
    <div class="us-top-img-box">
      <img :src="imgDefultUrl + bannsers.swiper_avatar">
      <div class="text-overlay">
        <span>{{ bannsers.swiper_title }}</span>
        <hr>
      </div>
    </div>
    <div class="choose-us" ref="revealElement">
      <view v-html="companys.company_about"></view>
    </div>


    <div class="about-img-three">
      <img :src="aboutThree">
      <div class="img-box-wrapper">
        <div class="img-box-item" v-for="(item, index) in aboutItms.serve" :key="index">
          <div class="img-box-item-top">{{ item.serve_title }}</div>
          <div class="img-box-item-text">{{ item.serve_description }}</div>
        </div>
      </div>
    </div>



    <div class="designer">
      <div class="designer-left">
        <img :src="imgDefultUrl + recommends.team_avatar">
        <div class="designer-left-text">
          <div class="text-top">{{ recommends.team_name }}</div>
          <div style="font-size: 1.5rem;">从业年限{{ recommends.team_experience }}年</div>
          <div style="font-size: 1.5rem;">擅于风格：
            <template v-for="(style, index) in recommends.team_stype">
              <span v-if="index > 0">, </span>{{ style }}
            </template>
          </div>
        </div>
      </div>
      <div class="designer-right">
        <img :src="imgDefultUrl + cases.case_avatar">
        <div class="designer-right-text">
          <div style="font-size: 1.875rem;width: 100%;padding-top: 2.125rem;font-weight: 300;">{{ cases.case_title }}
          </div>
          <div
            style="font-size: 1.375rem;color: rgba(56, 56, 56, 1);padding-top: .5rem;font-weight: 300;letter-spacing: .0625rem;">
            {{ cases.case_description }}
          </div>
        </div>
      </div>
    </div>
    <div class="testimonials-box">
      <span>客户感言<span style="color: #F3A048;">，</span>客户评价</span>
      <Carousel :parentWidth="1395" :parentHeight="400" :slides="aboutItms.feedback">
        <template v-for="(slide, index) in aboutItms.feedback" :key="index" v-slot:[`slide-${index}`]>
          <div class="testimonials-box-img">
            <img :src="imgDefultUrl + slide.customer_avatar">
            <span style="font-size: 1.5rem;margin-top: 1.5rem;color: rgba(243, 160, 72, 1);">{{ slide.customer_name
              }}</span>
            <div class="testimonials-box-text">{{ slide.feedback_text }}</div>
          </div>
        </template>
      </Carousel>

    </div>
    <div class="BaiduMap" ref="mapRef"></div>
    <div class="lianxi-box">
      <div style="color: rgba(56, 56, 56, 1);font-size: 1.5rem;font-weight: 300;">我们的工作不仅仅是得到认可</div>
      <div style="font-size: 3rem;color: rgba(56, 56, 56, 1);font-weight: 400;">让我们释放结构设计的力量，为您的业务助一臂之力</div>
      <div style="font-size: 1.5rem;color: rgba(56, 56, 56, 1);font-weight: 300;">我们是建筑师、规划师、工程师、战略家和行业专家，涵盖数百个学科。</div>
      <div class="lianxi-box-for">
        <div class="lianxi-box-for-item" @click="() => isModalVisible = true">加入我们</div>
        <div class="lianxi-box-for-item" @click="() => isModalVisible = true">加入我们</div>
      </div>
    </div>
  </div>

  <Modal :isVisible="isModalVisible" @close="hideBookingModal">
    <div class="prup">
      <div class="top">免费预约</div>
      <div class="p-content">
        <div class="position">
          <select class="select-item" @change="handlePositionChange">
            <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
          </select>
        </div>
        <div class="numberinput">
          <input
            style="width: 37.375rem;height: 3.9419rem;display: flex;align-items: center;padding-left: .625rem;border: .0625rem solid rgba(128, 128, 128, 1);outline: none;"
            type="text" id="modelPhoneNumber" v-model="modelPhoneNumber" placeholder="请输入您的手机号码" />
        </div>
        <div class="sub-btn-box">
          <n-button style="height: 3.9375rem;width: 11.25rem;" ghost color="rgba(241, 137, 27, 1)"
            @click="modeSubClick">
            提交
          </n-button>
          <n-button style="height: 3.9375rem;width: 11.25rem;" ghost @click="() => isModalVisible = false">
            取消
          </n-button>
        </div>
      </div>
    </div>
  </Modal>

</template>
<style scoped lang="less">
.about-us {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 7.5rem;
  overflow: hidden;

  .us-top-img-box {
    position: relative;
    width: 100%;
    height: 34.8125rem;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .text-overlay {
      position: absolute;
      top: 40%;
      left: 25%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 4.5rem;
      padding: .625rem;
      border-radius: .3125rem;

      hr {
        height: .125rem;
        background-color: rgba(243, 160, 72, 1);
        border-color: rgba(243, 160, 72, 1);
      }
    }
  }

  .choose-us {
    width: 1920px;
    height: 71.75rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .about-img-three {
    position: relative;
    width: 100%;
    height: 31.375rem;

    img {
      width: 100%;
      height: 100%;
    }

    .img-box-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .img-box-item {
        width: 27.8325rem;
        height: 21.125rem;
        background-color: #fff;
        display: flex;
        flex-direction: column;

        .img-box-item-top {
          margin-top: 4.4375rem;
          font-size: 2.125rem;
          font-weight: 500;
          padding-left: 1.875rem;
        }

        .img-box-item-text {
          margin-top: 1.5rem;
          padding-left: 1.875rem;
          font-size: 1.5625rem;
          font-weight: 300;
          letter-spacing: .0625rem;
          color: rgba(56, 56, 56, 1);
        }
      }
    }
  }

  .designer {
    width: 100%;
    height: 70.125rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .designer-left {
      width: 31.8125rem;
      display: flex;
      justify-content: center;
      flex-direction: column;

      img {
        width: 31.8125rem;
        height: 42.3125rem;
      }

      .designer-left-text {
        margin-top: 2.125rem;
        width: 24.375rem;
        height: 7.375rem;
        display: flex;
        justify-content: center;
        flex-direction: column;

        .text-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          font-size: 1.875rem;
          color: rgba(243, 160, 72, 1);
        }
      }
    }

    .designer-right {
      width: 63.625rem;
      height: 52.0625rem;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      img {
        width: 100%;
        height: 42.3125rem;
      }

      .designer-right-text {
        padding-top: 2.125rem;
        width: 100%;
        height: 7.625rem;
      }

    }
  }

  .testimonials-box {
    width: 100%;
    height: 54.6875rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    span {
      font-size: 2.5rem;
    }

    .testimonials-box-img {
      width: 87.1875rem;
      height: 23.875rem;
      background: rgba(250, 249, 245, 1);
      box-shadow: 0rem 1.875rem 3.75rem -0.75rem rgba(50, 50, 93, 0.25), 0rem 1.125rem 2.25rem -1.125rem rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      img {
        margin-top: -9.375rem;
        width: 12.75rem;
        height: 12.75rem;
        border-radius: 62499999.9375rem;
      }

      .testimonials-box-text {
        width: 71rem;
        height: 6.1875rem;
        margin-top: 3.125rem;
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: .0625rem;
      }
    }
  }

  .BaiduMap {
    width: 100%;
    height: 39.375rem;
  }

  .lianxi-box {
    padding-top: 4.6875rem;
    width: 100%;
    height: 30.75rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    .lianxi-box-for {
      width: 30.0625rem;
      height: 9.25rem;
      display: flex;
      align-items: center;
      justify-content: center;

      .lianxi-box-for-item {
        margin: .625rem;
        width: 16.1994rem;
        height: 4.125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 300;
        border: .0938rem solid rgba(241, 137, 27, 1);
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      .lianxi-box-for-item:hover {
        background: rgba(241, 137, 27, 1);
        color: #fff;
      }
    }

  }
}

.prup {
  width: 43.75rem;
  height: 25rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  .top {
    width: 100%;
    height: 6.0625rem;
    background: rgba(56, 56, 56, 1);
    font-size: 2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-content {
    width: 100%;
    height: 24.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;

    .position {
      width: 37.375rem;
      height: 3.9419rem;

      .select-item {
        width: 100%;
        height: 100%;
        background-color: #fff;
      }
    }

    .numberinput {
      width: 37.375rem;
      height: 3.9419rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sub-btn-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
}
</style>